<template>
  <div class="spot_point" :style="{ position: position }">
    <div class="list_box">
      <div
        class="item"
        v-for="(item, index) in list"
        :key="item.id"
        @click="handPoint(index)"
      >
        <svg-icon
          class="item_active"
          :icon-class="index == active ? 'point' : ''"
        ></svg-icon>
        <span class="title">{{ item.name }}</span>
      </div>
      <div class="division" :style="{ left: left }"></div>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
export default {
  name: "SpotPoint",
  //   computed: {
  //     ...mapGetters(["extensions"]),
  //   },
  props: {
    active: {
      default: 0,
      type: [String, Number],
    },
    left: {
      default: "27px",
      type: String,
    },
    position: {
      default: "absolute",
      type: String,
    },
    list: {
      type: Array,
      default: () => [],
    },
    //是否开启滚动动画
    isAnimation: {
      type: Boolean,
      default: false,
    },
    pointBoxId: {
      type: String,
      default: "pointBox",
    },
  },
  data() {
    return {
      radio: false,
    };
  },
  mounted() {},
  methods: {
    handPoint(index) {
      // this.active = index;
      this.$emit("handPoint", index);
    },
  },
};
</script>

<style scoped lang='scss'>
.spot_point {
  position: absolute;
  right: 50px;
  top: 150px;
  .list_box {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    .division {
      position: absolute;
      left: 27px;
      top: 0;
      height: 100%;
      width: 1px;
      background-color: #e9e9e9;
    }
    .item {
      margin: 10px 20px 0 20px;
      position: relative;
      display: flex;
      align-items: center;
      &:first-child {
        margin-top: 0;
      }
    }
    .item_active {
      margin-right: 12px;
      z-index: 9;
    }
  }
}
</style>